<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout布局</title>
<%@ include file="../BasePage.jsp"%>
<script type="text/javascript">
	$(function(){
	    
	    $("#tree").tree({
	        url:"<%=path%>/tree/123456/index.json",
	        //加载时动画
	        animate:true,
	        //是否允许拖动
	        dnd:false,
	        checkbox:false,
	        lines:true,
	        onBeforeExpand:function(node,param){
	            $("#tree").tree("options").url = "<%=path%>/tree/" + node.id + "/child.json";
            },
            onDblClick : function(node)
            {
                var path="";
                if(node.text=="日志管理"){
                    path="<%=path%>/system/log.html";
                }else{
                    path="<%=path%>/timeOut.html";
                }
                //index++;
    			$('#tabs').tabs('add',{
    				title: 'Tab'+node.text,
    				//content: '<div style="padding:10px">Content'+node.text+'</div>',
    				href:path,
    				closable: true
    			});
                //$.messager.alert("树的内容", node.text, "info");
            }
        });
	    
	    $('#dg').datagrid({
		    toolbar: [{
				iconCls: 'icon-edit',
				handler: function(){alert('edit');}
			},'-',{
				iconCls: 'icon-help',
				handler: function(){alert('help');}
			}],
			rowStyler: function(index,row){
				if (row.listprice>70){
					return 'color:red;';
				}
			},
			height:630,
		    rownumbers:true,
		    singleSelect:true,
		    pagination:true,
		    url:"<%=path%>/demo/product.json",
		    pageSize : 5,
		    pageList:[5,10,15,20,25,30]
		 });
	    
    });
	
	
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA; padding: 10px">north region</div>
	<div data-options="region:'west',split:true,title:'West'" style="width: 150px; padding: 10px;">
		<div style="width: 0px;">
			<ul id="tree" class="easyui-tree"></ul>
		</div>
	</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width: 100px; padding: 10px;">east region</div>
	<div data-options="region:'south',border:false" style="height: 50px; background: #A9FACD; padding: 10px;">south region</div>
	<div data-options="region:'center',title:'Center',iconCls:'icon-ok',iconCls:'icon-ok'">
		<div id="tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
			
			<div title="DataGrid" data-options="closable:true" style="padding:5px">
				<table id="dg"  title="CheckBox Selection on DataGrid">
					<thead>
						<tr>
							<th colspan="3">113</th>
							<th colspan="4">456</th>
						</tr>
						<tr>
<!-- 							<th data-options="field:'ck',checkbox:true"></th> -->
							<th data-options="field:'itemid',align:'center',width:'200'">Item ID</th>
							<th data-options="field:'productid',align:'center',width:'300'">Product</th>
							<th data-options="field:'listprice',align:'center',width:'200'">List Price</th>
							<th data-options="field:'unitcost',align:'center',width:'200'">Unit Cost</th>
							<th data-options="field:'attr1',align:'center',width:'200'">Attribute</th>
							<th data-options="field:'status',align:'center',width:'250'">Status</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</body>
</html>